<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录界面</title>
	</head>
	<style type="text/css">
		a {
			text-decoration: none;
			cursor: pointer;
		}
		body{
			font-family: "微软雅黑";
			background: url(assets/images/background.jpg) no-repeat;
		}
		.login-btn {
			display: inline-block;
			width: 48px;
			height: 24px;
			margin: 18px;
		    line-height: 24px;
			color: #fff;
			background-color: #4e71f2;
			font-size: 13px;
			text-align: center;
			border-radius: 6px;
		}
		.login-box {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 356px;
			background-color: #fff;
			z-index: 10;
			padding: 0 28px;
			text-align: center;
		}
		.body {
			margin-top: 30px;
		}
		.login-box .title {
			font-size: 16px;
			margin: 24px 0 15px;
			height: 32px;
    		line-height: 46px;
		}
		.login-box .input-box {
			margin-bottom: 16px;
		}
		.input-box input{
			display: block;
		    height: 20px;
		    margin: 0 auto;
		    padding: 10px 8px;
		    border: 1px solid #ddd;
		    font-size: 14px;
		    color: #666;
		    width: 284px;
		}
		.login-box .input-btn {
			margin: 48px 0 16px;
		}
		.input-btn input {
			display: block;
		    height: 40px;
		    line-height: 40px;
		    width: 300px;
		    font-size: 16px;
		    font-weight: 800;
		    cursor: pointer;
		    color: #fff;
		    background: #4490f7;
		    margin: 0 auto;
		    border: 0;
		}
		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28px;
			margin-bottom: 48px;
		}
		.footer a{
			display: inline-block;
		    font-size: 12px;
		    color: #2e82ff;
		}
		.shadow {
			display: block;
			position: absolute;
		    top: 0px;
		    left: 0px;
		    width: 100%;
		    height: 100%;
		    z-index: -1;
		    background-color: rgba(0, 0, 0, .4);
		}
	</style>
	<body>
		
		
		
		<div class="login-box">
			<p class="title">用户登录</p>
			<div class="body">
				<form action="${pageContext.request.contextPath}/User" method="post" id="login-form">
					<input type="hidden" name="op" value="login"/>
					
					<p class="input-box">
						<input type="text" id="userName" name="userName"   value="" placeholder="用户名"/>
					</p>
					<p class="input-box">
						<input type="password" id="userPassword" name="userPassword"  value="" placeholder="密码"/>
					</p>
					 <p >
                       <input type="checkbox"  name="remeberme" id="remeberme">记住密码
					</p>
					<p class="input-btn">
						<input type="button" value="登录" id="login-btn"/>
					</p>
				</form>
			</div>
			<div class="footer">
			
				<a href="register.jsp" class="regist">立即注册</a>
			</div>
		</div>
		
		<div class="shadow"></div>
		 
    


	<!-- 	<script type="text/javascript">
			const loginBox = document.querySelector('.login-box');
			const shadow = document.querySelector('.shadow');
			const loginBtn = document.querySelector('.login-btna');
			let showBox = false;
			
			loginBtn.onclick = function() {
				showBox = !showBox;
				if (showBox) {
					loginBox.style.display = 'block';
					shadow.style.display = 'block';
				} else {
					loginBox.style.display = 'none';
					shadow.style.display = 'none';
				}
			}
		</script> -->
		<script src="${pageContext.request.contextPath}/front/assets/js/jquery-3.5.1.js" ></script>
<%-- 		<script src="${pageContext.request.contextPath}/front/assets/js/bootstrap.min.js"></script> --%>
		<script type="text/javascript">
		var loginErrorMessage = "${param.loginErrorMessage}";  // ${param.参数名} EL表达式获取页面URL上的参数值
    	if(loginErrorMessage!=""){
    		alert("用户名或密码错误,请重新登录");
    		location.href="${pageContext.request.contextPath}/userLogin.jsp";
    	}
    	
    	var noLoginMessage = "${param.noLoginMessage}";  // ${param.参数名} EL表达式获取页面URL上的参数值
    	if(noLoginMessage!=""){
    		alert("请先登录!");
    		location.href="${pageContext.request.contextPath}/front/userLogin.jsp";
    	}
    	
    	window.onload = function(){
    		
    		// 默认填充cookie中用户信息的第一项（理想化,多个用户是多个cookie,有可能存储不是用户信息的cookie）
    		// 获取客户端所有cookie
    		var cookies = document.cookie;
    		// 判断是否有cookie内容
    		if(cookies.length != 0){
    			// 存在至少1个cookie用户信息 cookie1=value;cookie2=value;
    			var cs =  cookies.trim().split(";");
    			// 获取第一个
    			var c = cs[0].split("=");// 将cookie1=value再根据=切割成2个内容  第一个内容cookie1   第二个内容value
    			// 填充
    			document.getElementById("userName").value = c[0];
    			document.getElementById("userPassword").value = c[1];
    			document.getElementById("remeberme").checked = true;
    		}
    	}
	
	 	$(document).ready(function() {
		$(document).on("click","#login-btn",function(){
			// 对输入进行校验
			var userName = $("#userName").val();
			var userPassword = $("#userPassword").val();
			if(userName.trim().length == 0 || userPassword.trim().length == 0){
				alert("用户名或密码不能为空");
			}else{
				// 获取表单数据
				var formData = $("#login-form").serialize(); // name=value&name=value...
				$.ajax({
	    			async:true,
	    			url:"${pageContext.request.contextPath}/user",
	    			type:"POST",
	    			data:formData,
	    			dataType:"text",
	    			success:function(result){
	    		
	    				if(result == "success" ){
	    					location.href="${pageContext.request.contextPath}/front/index.jsp?";
	    				} else{
	    					alert("用户名或者密码错误，请重新登录！");
	    				}
	    				
	    			},
	    			error:function(){
	    				alert("异步请求失败");
	    			}
	    		});
			}
		});
		}) 
		// 对用户名输入失去焦点事件
		document.getElementById("userName").onblur = function(){
    		
    		// 获取输入的用户名
    		var userName = this.value;
    		console.log(userName);
    		// 获取当前username是否有对应的cookie
    		var value = getCookie(userName);
    		if(value!=""){
    			// 表示有当前这个useranme的key
    			document.getElementById("userPassword").value = value;
    			document.getElementById("remeberme").checked = true;
    		}else{
    			document.getElementById("userPassword").value = "";
    			document.getElementById("remeberme").checked = false;
    		}
    	}
    	
    	// 创建一个函数用于返回指定 cookie 的值：
    	function getCookie(cname) {
    	  var name = cname + "="; // username1=
    		
    	  // document.cookie返回"cookie1=value; cookie2=value; cookie3=value"
    	  var ca = document.cookie.split(';'); // 切割后得到数组,数组有两个元素[ "username1=king" "username2=queen" ]
    	  
    	  for(var i = 0; i < ca.length; i++) {
    		  
    	    var c = ca[i].trim(); // ca[0]是username1=king  ca[1]是username2=queen
    	    
    	    if (c.indexOf(name) == 0) {
    	    	return c.substring(name.length,c.length);
    	    }
    	  }
    	  return "";
    	}
		
		
		
    	
	
		</script>
	</body>
</html>
